<template>
  <div class="big-box">
    <div class="home-recommond">
        <span class="more">推荐歌单</span>
        <span class="box">更多></span>
    </div>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,i) in listData" :key="i">
                <div class="cover">
                    <img  :src="item.picUrl"/>
                    <span>{{ item.playCount | numFilter(1)}}万</span>
                </div>
                <span>{{ item.name }}</span>
            </li>
        </ul>
        </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        getSongListData(){
            this.$request('get','/personalized')
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    this.listData=res.result;
                }
                this.betterScrollHorizontal(this.listData.length,10);
            });
        },
        betterScrollHorizontal(num,itemWidth){
            this.$refs.content.style.width=num * itemWidth + "rem";
                this.$nextTick(() => {
                    this.scroll =new BScroll(this.$refs.wrapper, {
                        scrollY:false,
                        scrollX: true,
                        startX: 0,
                    });
                });
          
    },
},
    filters:{
        numFilter(value,num){
            return parseFloat(value/10000).toFixed(num)
        }
    }
}
</script>
<style scoped>
.big-box{
    display: flex;
    flex-direction: column;
    width: 414px;
    height: 200px;
    margin: auto;
    /* border: 0.5px solid #e7e7e7; */
    border-radius: 10px;
    box-shadow:0px 0px 3px 3px#e9e7e7;
    background-color: rgb(255, 255, 255);
    margin-bottom: 10px;
    margin-top: 10px;
}
.home-recommond{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 414px;
    height: 40px;
}
.more{
    font-size: 25px;
    margin: 10px;
    font-style: inherit;
}
.box{
    position: absolute;
    right: 0px;
    margin: 10px;
    border: 1px solid gray;
    border-radius: 12px;
    /* text-align: center; */
    font-style: inherit;
    width: 50px;
    height: 30px;
}
img{
    width: 100px;
    height: 100px;
    border-radius: 10%; 
}
.content{
    display: flex;
    flex-direction: row;
    height: 160px;
    margin: auto;
}
.cover > span {
    position: absolute;
    right: 0.3rem;
    top: 0.2rem;
    background-color:#a6a8a0;
    color: white;
    font-size: 10px;
    border-radius: 1rem;
    width: 3rem;
    display: inline-block;
    }
.cover {
    position: relative;
    }
ul.content{
    width: calc(6*120px);
    }
.wrapper {
    width: 100%;
    overflow: hidden;
    }
ul.content li {
    width: 120px;
    vertical-align: top;
    }
ul.content li * {
    margin: 2px;
    }
ul.content li > span {
    font-size: 0.5rem;
    color: #54493b;
    }
</style>